<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.css"/>
<title>抽奖效果演示</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,
img {
	border: 0;
}

body {
	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

.rotary {
	position: relative;
	width: 854px;
	height: 504px;
	margin: 50px auto 0 auto;
	background:  url(images/background.png);
}

.rotaryArrow {
	position: absolute;
	left: 181px;
	top: 104px;
	width: 294px;
	height: 294px;
	cursor: pointer;
	background-image: url(images/arrow.png);
}

.list {
	position: absolute;
	right: 29px;
	top: 144px;
	width: 160px;
	height: 320px;
	overflow: hidden;
}
.list ul{
	width: 100%;
	overflow: hidden;
}
.list ul li {
	height: 27px;
	font-size: 10px;
	color: deeppink;
	overflow: hidden;
	/*text-indent: 25px;*/
}

.result {
	display: none;
	position: absolute;
	left: 130px;
	top: 190px;
	width: 395px;
	height: 118px;
	background-color: rgba(0, 0, 0, 0.75);
	filter: alpha(opacity=90);
}

.result a {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 25px;
	height: 25px;
	text-indent: -100px;
	background-image: url(images/close.png);
	overflow: hidden;
}

.result p {
	padding: 45px 15px 0;
	font: 16px "Microsoft Yahei";
	color: #fff;
	text-align: center;
}

.result em {
	color: #ffea76;
	font-style: normal;
}
</style>

</head>

<body>

<!-- Demo start  -->
<div class="rotary">
	<div class="rotaryArrow" id="rotaryArrow"></div>
	<div class="list">
		<ul>
		</ul>
	</div>
	<div class="result" id="result">
		<p id="resultTxt"></p>
		<a href="javascript:" id="resultBtn" title="关闭">关闭</a>
	</div>
</div>


<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script type="text/javascript">

$(function(){
	var $rotaryArrow = $('#rotaryArrow');
	var $result = $('#result');
	var $resultTxt = $('#resultTxt');
	var $resultBtn = $('#result');

	$rotaryArrow.click(function(){
		var data = [0, 1, 2, 3, 4, 5, 6, 7];
		var numbers=['157****2001','157****2002','157****2003','157****2004','157****2005','157****2006']
		data = data[Math.floor(Math.random()*data.length)];
		i = numbers[Math.floor(Math.random()*numbers.length)];
		switch(data){
			case 1: 
				rotateFunc(1,87,'恭喜您获得了 <em>1</em> 元代金券','恭喜'+i+'获得1元代金卷');
				break;
			case 2: 
				rotateFunc(2,43,'恭喜您获得了 <em>5</em> 元代金券','恭喜'+i+'获得5元代金卷');
				break;
			case 3: 
				rotateFunc(3,134,'恭喜您获得了 <em>10</em> 元代金券','恭喜'+i+'获得10元代金卷');
				break;
			case 4: 
				rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');
				break;
			case 5: 
				rotateFunc(5,223,'恭喜您获得了 <em>20</em> 元代金券','恭喜'+i+'获得20元代金卷');
				break;
			case 6: 
				rotateFunc(6,268,'恭喜您获得了 <em>50</em> 元代金券','恭喜'+i+'获得50元代金卷');
				break;
			case 7: 
				rotateFunc(7,316,'恭喜您获得了 <em>30</em> 元代金券','恭喜'+i+'获得30元代金卷');
				break;
			default:
				rotateFunc(0,0,'很遗憾，这次您未抽中奖，继续加油吧');
		}
	});

	var rotateFunc = function(awards,angle,text1,text2){  //awards:奖项，angle:奖项对应的角度
		$rotaryArrow.stopRotate();
		$rotaryArrow.rotate({
			angle: 0,
			duration: 5000,
			animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
			callback: function(){
				$resultTxt.html(text1);
				$result.show();
				if(!text2){
					$('ul').prepend('');
				}else{				
					$('ul').prepend('<li></li>');
					$('li').first().html(text2);
					$('li').addClass('fa fa-user');
				}
			}
		});
	};

	$resultBtn.click(function(){
		$result.hide();
	});
});
</script>

</body>
</html>